<template>
    <h3>年级列表</h3>
    <div>
        <a-table :dataSource="grades" :columns="columns" size="small" :pagination="{ pageSize: 3 }">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'operation'">
                    <a-space>
                        <RouterLink :to="{
                            name: 'gradeupdate',
                            params: {
                                id: record.gradeID
                            }
                        }">编辑</RouterLink>
                        <a-popconfirm title="确认要删除吗?" @confirm="handleDeleteClick(record)">
                            <a>删除</a>
                        </a-popconfirm>
                    </a-space>

                </template>
            </template>
        </a-table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            grades: [],
            columns: [
                {
                    title: '年级编号',
                    dataIndex: 'gradeID',
                },
                {
                    title: '年级名称',
                    dataIndex: 'gradeName',
                },
                {
                    title: '编辑',
                    dataIndex: 'operation',
                }
            ],
        }
    },
    methods: {
        loadgrades() {
            axios.get('/grade/all',).then(res => {
                if (res.data.success) {
                    console.log(res.data.data)
                    this.grades = res.data.data
                } else {
                    console.log(res.data.message)
                }
            })
        },
        handleDeleteClick({ gradeID, gradeName }) {
            // let flag = confirm('确认要删除<' + gradeName + '>吗?')
            // if (flag == false) {
            //     return
            // }
            axios.delete('/grade/' + gradeID,)
                .then(res => {
                    if (res.data.success) {
                        alert('删除成功')
                        this.loadgrades()
                    }
                })
        }
    },
    created() {
        this.loadgrades()
    }
}
</script>
<style scoped></style>